<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.org/ui"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCPedidoInt.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <c:if test="#{pCPedidoInt.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="interno" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />
        <h:outputLabel value="Solo puede agregar nuevos pedidos internos, desde el listado de 'Reservas'." />
        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js">
            <h:form id="formTabla#{nombreparam}">
                <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dataTable  var="item"
                              value="#{pCPedidoInt.listado}"
                              rows="10"
                              paginator="true"
                              paginatorAlwaysVisible="false"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true"
                              resizableColumns="true"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}"> 
                    <f:facet name="header">  

                        <p:toolbar id="tbx#{nombreparam}" style="margin-top: 4px; margin-bottom: 4px;">
                            <p:toolbarGroup>
                                <h:outputText styleClass="titulos" value="Listado de #{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"
                                              rendered="#{sesion.mostrarTituloTabla}"/>
                                <p:selectCheckboxMenu styleClass="comboSeleccion" value="#{pCPedidoInt.selectedChecksVisible}" label="Elegir columnas" panelStyle="width:220px"
                                                      panelStyleClass="saraza" >  
                                    <f:selectItems value="#{pCPedidoInt.checksVisible}"/>
                                    <p:ajax event="change" listener="#{pCPedidoInt.setearVisibles()}" process="@this"
                                            update=":tabs:formTabla#{nombreparam}"/>
                                </p:selectCheckboxMenu>
                            </p:toolbarGroup>
                        </p:toolbar>
                    </f:facet>

                    <p:column sortBy="#{item.id}"
                              rendered="#{pCPedidoInt.getColVisible('codigo')}">
                        <f:facet name="header"> 
                            <h:outputText value="Id"/>
                        </f:facet>
                        <h:outputText value="#{item.id}"/>
                    </p:column> 

                    <p:column sortBy="#{item.fechaHora}"
                              rendered="#{pCPedidoInt.getColVisible('fechaHora')}">
                        <f:facet name="header">
                            <h:outputText value="Fecha"/>
                        </f:facet>
                        <h:outputText value="#{pCPedidoInt.parseaHora(item.fechaHora)}"/>
                    </p:column>

                    <p:column sortBy="#{item.mozo.nombreUsuario}"
                              rendered="#{pCPedidoInt.getColVisible('mozo')}" filterBy="#{item.mozo.nombreUsuario}">
                        <f:facet name="header"> 
                            <h:outputText value="Mozo"/>
                        </f:facet>
                        <h:outputText value="#{item.mozo.nombreUsuario}"/>
                    </p:column>
                    
                    <p:column sortBy="#{item.facturado}" width="70px" style="text-align: center;"
                              rendered="#{pCPedidoInt.getColVisible('facturado')}">
                        <f:facet name="header"> 
                            <h:outputText value="Factura"/>
                        </f:facet>
                        <h:outputText value="Emitida" rendered="#{item.facturado}"/>
                        <h:outputText value="Pendiente" rendered="#{!item.facturado}"/>
                    </p:column>
                    
                    <p:column width="94" exportable="false">
                        <p:commandLink actionListener="#{pCPedidoInt.imprimirFactura(item)}"
                                       process="@this" title="Imprimir Factura #{lenguajeBean.devolverString(nombreparam)}" 
                                       update=":tabs:formdata2#{nombreparam}:dlgdata2#{nombreparam} :tabs:formdata2#{nombreparam}"
                                       oncomplete="wvdlgdata2#{nombreparam}.show();"
                                       style="margin-right: 2px;">
                            <h:graphicImage library="theme/images" name="imprimir_icono.png" alt="Facturar un pedido" />   
                        </p:commandLink>

                        <p:commandLink actionListener="#{pCPedidoInt.establecerTemporal(item, true)}"
                                       process="@this" title="Modificar #{lenguajeBean.devolverString(nombreparam)}" 
                                       update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam} :tabs:formdata#{nombreparam}"
                                       oncomplete="wvdlgdata#{nombreparam}.show();"
                                       style="margin-right: 2px;"
                                       disabled="#{!pCPedidoInt.consultarPermisos().modificacion or !pCPedidoInt.esEditable(item)}">
                            <h:graphicImage library="theme/images" name="editar_ico.png" alt="Modificar un elemento" />   
                        </p:commandLink>

                        <p:commandLink actionListener="#{pCPedidoInt.establecerTemporal(item, false)}"
                                       process="@this"
                                       style="margin-right: 2px;"
                                       oncomplete="wvconfe#{nombreparam}.show();"
                                       title="Eliminar #{lenguajeBean.devolverString(nombreparam)}"
                                       disabled="#{!pCPedidoInt.consultarPermisos().baja  or !pCPedidoInt.esEditable(item)}">
                            <h:graphicImage library="theme/images" name="eliminar_ico.png" alt="Eliminar un elemento"/> 
                        </p:commandLink>

                        <p:confirmDialog id="confe#{nombreparam}" widgetVar="wvconfe#{nombreparam}"
                                         header="Confirmar eliminación de #{lenguajeBean.devolverStringPlural(nombreparam)}" 
                                         closeOnEscape="true" closable="true" showEffect="#{efectshowparam}" hideEffect="#{efecthideparam}"
                                         message="¿Seguro que desea eliminar permanentemente el elemento seleccionado?">
                            <p:commandButton value="Si" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                             actionListener="#{pCPedidoInt.eliminar()}"
                                             update="tableModel#{nombreparam} :tabs:formTabla#{nombreparam}:tableModel#{nombreparam}:tbx#{nombreparam} :tabs:formTabla#{nombreparam}:growldel#{nombreparam}"
                                             onclick="wvconfe#{nombreparam}.hide();" style="float: right;"/>  
                            <p:commandButton value="No" styleClass="ui-confirmdialog-no" 
                                             icon="ui-icon-close" onclick="wvconfe#{nombreparam}.hide();"
                                             style="float: right;"/>
                        </p:confirmDialog>
                    </p:column>

                </p:dataTable>
                <p:panel header="Exportar datos de la tabla" styleClass="exportar-datos">  
                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="excel.png" alt="Excel" />  
                        <p:dataExporter type="xls" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="pdf.png" alt="PDF" />  
                        <p:dataExporter type="pdf" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"/>  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="csv.png" alt="CSV" />    
                        <p:dataExporter type="csv" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="xml.png" alt="XML" />  
                        <p:dataExporter type="xml" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  
                </p:panel>  
            </h:form>

            <h:form id="formdata#{nombreparam}">
                <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" />
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="900px"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}"
                          header="#{pCPedidoInt.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">
                    <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="dialogo_pedidos_int.xhtml"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>
            <h:form id="formdata2#{nombreparam}">
                <p:growl id="growldata2#{nombreparam}" widgetVar="wvgrowldata2#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="950px" 
                          widgetVar="wvdlgdata2#{nombreparam}" id="dlgdata2#{nombreparam}"
                          header="Imprimir Factura" 
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">
                    <h:panelGroup id="paneldialogodata2#{nombreparam}" layout="block" styleClass="factura"
                                  style="overflow: auto; display: block;">
                        <ui:include src="impresion.xhtml"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>
            <h:form id="formcols#{nombreparam}">
                <p:growl id="growl-cols#{nombreparam}" widgetVar="wvgrowl-cols#{nombreparam}"
                         autoUpdate="false" showDetail="false" showSummary="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="450px"
                          widgetVar="wvdlgcols#{nombreparam}" id="dlgcols#{nombreparam}"
                          header="Elegir columnas de la tabla" closeOnEscape="true"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                    <p:message for="val-cols-#{nombreparam}" id="msg-cols-#{nombreparam}"/>
                    <p:selectManyCheckbox value="#{pCPedidoInt.selectedChecksVisible}"  
                                          layout="pageDirection" id="val-cols-#{nombreparam}"
                                          required="true"
                                          requiredMessage="Debe seleccionar al menos una columna para ver.">  
                        <f:selectItems value="#{pCPedidoInt.checksVisible}"/>
                        <p:ajax event="change" update="growl-cols#{nombreparam}"
                                listener="#{pCPedidoInt.setearVisibles()}" process="@this"/>
                    </p:selectManyCheckbox>
                    <p:separator/>
                    <h:panelGroup layout="block" style="overflow: auto; display: block;">
                        <p:commandButton value="Aplicar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam}"
                                         style="float: right;" styleClass="btn-aceptar"/>
                        <p:commandButton value="Cancelar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         style="float: right; margin-right: 10px;" styleClass="btn-cancelar"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <p:dialog maximizable="false" minimizable="false" modal="true" id="dlgespera#{nombreparam}"
                      widgetVar="wvdlgespera#{nombreparam}">
                <p:progressBar widgetVar="pbAjax" ajax="true" value="100" labelTemplate="{value}%" styleClass="animated"/>
            </p:dialog>

            <p:dialog  modal="true" closable="true" dynamic="false"  width="350px"  
                       widgetVar="wvdlgcols#{nombreparam}" id="ayuda#{nombreparam}"
                       header="Ayuda para agregar productos a un pedido" closeOnEscape="true"
                       hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                <h:outputText value="Para agregar productos al pedido, hay que clickear el agregar del producto que se
                              desea agregar (de cualquiera de los tres tipos), al hacer click aparecerá el precio en el pizarrón" />
            </p:dialog>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>